<template>
    <view class="bill-container flex fd-c">
        <topBar :back="true">
        </topBar>
        <!-- 内容区域 -->
        <scroll-view class="scrollable-content" scroll-y>
            <!-- 购物卡展示区域 -->
            <view class="card-display-section flex fd-c ai-c">
                <image src="/static/dihuanchenggong.png" mode="aspectFit" style="width: 120rpx;height: 120rpx;">
                </image>
                <view class="success-text">
                    积分兑换成功
                </view>
            </view>

            <!-- 兑换详情信息 -->
            <view class="exchange-details">
                <view class="detail-item jc-sb">
                    <text class="detail-label">消耗积分</text>
                    <text class="detail-value">{{ data.points }}</text>
                </view>
                <view class="detail-item jc-sb">
                    <text class="detail-label">数量</text>
                    <text class="detail-value">×1</text>
                </view>
                <view class="detail-item jc-sb">
                    <text class="detail-label">积分兑换订单编号</text>
                    <text class="detail-value">{{ data.order_sn }} | <text class="copy-text"
                            @click="copyText(data.order_sn)">复制</text></text>
                </view>
                <view class="detail-item jc-sb">
                    <text class="detail-label">兑换时间</text>
                    <text class="detail-value">{{ formatTime(data.createtime) }}</text>
                </view>
                <view class="detail-item flex jc-sb ai-fs">
                    <text class="detail-label">电子卡密</text>
                    <view class="detail-value flex fd-c ai-fd">
                        <view style="margin-bottom: 16rpx;">{{ data.card_no }}</view>
                        <view class="detail-value copy-btn" @click="copyText(data.card_no)">
                            复制
                        </view>
                    </view>

                </view>
                <view class=" detail-item jc-sb">
                    <text class="detail-label">电子卡兑换路径</text>
                    <text class="detail-value">{{ data.remark }}</text>
                </view>
            </view>
        </scroll-view>
        <view class="bottom-button" @click="handleBack">
            <view class="bottom-button-item">
                继续兑换
            </view>
        </view>
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '@/api'
import { BASE_URL } from '@/utils/request'
import { formatTime } from '@/utils/utils'
const data = ref({})
onLoad((options) => {
    console.log(options)
    data.value = JSON.parse(options.data)
})
const copyText = (text) => {
    uni.setClipboardData({
        data: text,
        success: () => {
            uni.showToast({
                title: '复制成功',
                icon: 'success'
            })
        }
    })
}
const handleBack = () => {
    uni.switchTab({
        url: `/pages/shop/shop`
    })
}
</script>

<style scoped>

.bill-container {
    height: 100vh;
    background-color: #fff;
    position: relative;
}

.exchange-records-container {
    padding: 32rpx;
    padding-top: 40rpx;
    flex: 1;
    overflow-y: auto;
}
.bottom-button {
    background-color: #fff;
    padding: 24rpx 0;
    border-top: 1rpx solid #f0f0f0;
    /* 适配苹果手机安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: 24rpx;
}
.scrollable-content{
    padding: 0 32rpx;
    box-sizing: border-box;
}

.bottom-button-item {
    background-color: #0F50DC;
    font-size: 36rpx;
    color: #fff;
    font-weight: 500;
    padding: 24rpx 70rpx;
    width: 440rpx;
    margin: 0 auto;
    border-radius: 80rpx;
    text-align: center;
}
.exchange-records-item {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}

.nav-bar {
    width: 100%;
    display: flex;
    margin: 0 auto;
}

.back-btn {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs {
    margin-right: 24px;
    display: flex;
    gap: 64rpx;
    font-size: 32rpx;
    color: #000;
    font-weight: 600;
}


/* 购物卡展示区域 */
.card-display-section {
    padding: 48rpx 0;
    margin-bottom: 80rpx;
    padding-bottom: 80rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #f0f0f0;
}

.card-container {
    position: relative;
}

.card-image {
    width: 240rpx;
    height: 150rpx;
    border-radius: 20rpx;
}

.card-info {
    display: flex;
    gap: 16rpx;
    margin-left: 24rpx;
}

.card-title {
    color: #000;
    font-size: 32rpx;
    font-weight: 600;
}

.card-value {
    color: #000;
    font-size: 32rpx;
    font-weight: 700;
}

/* 兑换详情信息 */
.exchange-details {
    background-color: #fff;
    margin-bottom: 32rpx;
}

.detail-item {
    display: flex;
    padding: 24rpx 0;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 28rpx;
    width: 230rpx;
    flex-shrink: 0;
}

.detail-value {
    color: #000;
    font-size: 28rpx;
    text-align: right;
}

.copy-btn {
    color: #0F50DC;
    font-size: 26rpx;
    font-weight: 600;
    border: 1px solid #0F50DC;
    padding: 12rpx 24rpx;
    border-radius: 40rpx;

}

.points {
    color: #0F50DC;
    font-size: 32rpx;
    font-weight: 600;
}

.status-success {
    color: #52c41a;
    font-weight: 600;
}

/* 使用说明 */
.usage-instructions {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.instructions-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.instructions-content {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.instruction-item {
    color: #666;
    font-size: 26rpx;
    line-height: 1.6;
}

.success-text {
    font-size: 40rpx;
    color: #000;
    margin-top: 20rpx;
}
</style>
